<script setup lang="ts">
import { onMounted, ref } from 'vue'

const defaultActive = ref('/')
onMounted(() => {
  defaultActive.value = window.location.pathname
})
</script>

<template>
  <main>
    <el-row class="h-full">
      <el-col :span="6" class="h-full">
        <el-menu default-active="defaultActive" class="h-full" :router="true">
          <el-sub-menu index="/vue-welcome">
            <template #title>
              <span>vue-welcome</span>
            </template>
            <el-menu-item index="/">vue welcome</el-menu-item>
            <el-menu-item index="/home">home</el-menu-item>
            <el-menu-item index="/about">about</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="/langchain">
            <template #title>
              <span>Langchain</span>
            </template>
            <el-menu-item-group title="Components">
              <el-sub-menu index="/chat-models">
                <template #title>
                  <span>Chat models</span>
                </template>
                <el-menu-item index="/ollama">Ollama</el-menu-item>
              </el-sub-menu>
            </el-menu-item-group>
          </el-sub-menu>
        </el-menu>
      </el-col>
      <el-col :span="18" class="p-3"> <RouterView /> </el-col>
    </el-row>
  </main>
</template>

<style scoped lang="less">
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>
